<template>
    <div class="app-container">
        <LitigationApplicationOrder :info="form" />
        <LitigationApplicationLitigation :info="form"/>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>变更信息</span>
                    <span></span>
                </div>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="更变诉讼原因" prop="proceedReason">
                                <el-input v-model="form.proceedReason" type="textarea" maxlength="200"></el-input>
                            </el-form-item>
                        </el-col> 
                        <el-col :span="12">
                            <el-form-item label="修改前累计未结算清费用" prop="oldAllNoPayoffCost">
                                <el-input v-model="form.oldAllNoPayoffCost"  disabled ></el-input>
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="12">
                            <el-form-item label="修改后累计未结算清费用" prop="name">
                                <el-input v-model="form.name" type="textarea" disabled maxlength="200"></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="24">
                            <el-form-item label="附件上传" prop="proceedFile">
                                <ImageCommon  :up-type="2" info="选择附件" :limit="20"
                                    v-model="form.proceedFile"></ImageCommon>
                            </el-form-item>
                        </el-col>
                    </el-row>    
            </div>
            <!-- 合同期内已生成账单未结清费用--修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内已生成账单未结清费用--修改</span>
                    <span></span>   
                </div>
                <div v-for="(item,index) in billFessList" :key="item.id">
                    <div class="title_box">
                    <div>
                        <span class="title_text">车牌号:</span>
                        <el-select v-model="item.carCode" placeholder="请选择" @change="(e)=>billFessCarChange(e,item)">
                            <el-option
                            v-for="info in item.carVonList"
                            :key="info"
                            :label="info"
                            :value="info">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="icon_sty">
                        <i class="el-icon-circle-plus-outline icon_add" @click="billFessListAdd"><span>新增</span></i>
                        <i v-if="0!=index" class="el-icon-remove-outline icon_add" @click="billFessListdelt(item.id)"><span>删除</span></i>
                    </div>
                </div>
                <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                    <el-table-column prop="periodsNum" label="期数"  align="center" >
                        <template v-slot="{row}">
                            <el-select v-model="row.periodsNum" placeholder="请选择" @change="(e)=>periodsNumChange(e,item)">
                                <el-option
                                    v-for="item in item.periods"
                                    :key="item.periodsNum"
                                    :label="item.periodsNum"
                                    :value="item.periodsNum">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="payeeType" label="费用类型"  align="center" >
                        <template v-slot="{row}">
                            <el-select v-model="row.payeeType" placeholder="请选择" @change="(e)=>payeeTypeNumChange(e,item)">
                                <el-option
                                v-for="item in item.typeList"
                                :key="item.proceedsType"
                                :label="item.proceedsTypeStr"
                                :value="item.proceedsType">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableAmount" label="修改前费用(元)" align="center"></el-table-column>
                    <el-table-column prop="changeAmount" label="修改后费用(元)" align="center">
                        <template v-slot="{row}">
                            <el-input v-model="row.changeAmount"></el-input>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="carNo" label="操作" align="center">
                        <template v-slot="{row}">
                            <el-button type="text" size="small" @click="deletCostItem(row,item.id)">删除</el-button>
                        </template>
                    </el-table-column> 
                </el-table>
                <el-button style="width:100%" icon="el-icon-plus" @click="addCostItem1(item.id)">添加费用项</el-button>
                </div>
               
            </div>
            <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改</span>
                    <span></span>   
                </div>
                <div v-for="(item,index) in newFessList" :key="item.id">
                    <div class="title_box">
                    <div>
                        <span class="title_text">车牌号:</span>
                        <el-select v-model="item.carCode" placeholder="请选择" @change="nowMmoney(item)">
                            <el-option
                            v-for="info in item.carVonList"
                            :key="info"
                            :label="info"
                            :value="info">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="icon_sty">
                        <i class="el-icon-circle-plus-outline icon_add" @click="newFessListAdd"><span>新增</span></i>
                        <i v-if="0!=index" class="el-icon-remove-outline icon_add" @click="newFessListdelt(item.id)"><span>删除</span></i>
                    </div>
                </div>
                <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                    <el-table-column prop="costType" label="费用类型"  align="center" >
                        <template v-slot="{row}">
                            <el-select v-model="row.costType" placeholder="请选择" @change="moneyType(item,row)">
                                <el-option
                                v-for="item in item.options"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cost" label="修改前费用(元)" align="center"></el-table-column>
                    <el-table-column prop="changeAmount" label="修改后费用(元)" align="center">
                        <template v-slot="{row}">
                            <el-input v-model="row.changeAmount"></el-input>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="carNo" label="操作" align="center">
                        <template v-slot="{row}">
                            <el-button type="text" size="small" @click="deletCostItem2(row,item.id)">删除</el-button>
                        </template>
                    </el-table-column> 
                </el-table>
                <el-button style="width:100%" icon="el-icon-plus" @click="addCostItem2(item.id)">添加费用项</el-button>
                </div>
               
            </div>
            <!-- 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项</span>
                    <span></span>   
                </div>
                <div v-for="(item,index) in newFessList1" :key="item.id">
                    <div class="title_box">
                    <div>
                        <span class="title_text">车牌号:</span>
                        <el-select v-model="item.carCode" placeholder="请选择">
                            <el-option
                            v-for="info in item.carVonList"
                            :key="info"
                            :label="info"
                            :value="info">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="icon_sty">
                        <i class="el-icon-circle-plus-outline icon_add" @click="billFessListAdd1"><span>新增</span></i>
                        <i v-if="0!=index" class="el-icon-remove-outline icon_add" @click="billFessListdelt1(item.id)"><span>删除</span></i>
                    </div>
                </div>
                <el-table fit :data="item.definitionList" border style="margin-top:10px;margin-bottom: 10px;" >
                    <el-table-column prop="costType" label="费用项类型" align="center">
                        <template v-slot="{row}">
                            <el-input v-model="row.costType"></el-input>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="cost" label="费用金额(元)" align="center">
                        <template v-slot="{row}">
                            <el-input v-model="row.cost"></el-input>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="carNo" label="操作" align="center">
                        <template v-slot="{row}">
                            <el-button type="text" size="small" @click="deletCostItem5(row,item.id)">删除</el-button>
                        </template>
                    </el-table-column> 
                </el-table>
                <el-button style="width:100%" icon="el-icon-plus" @click="addCostItem3(item.id)">添加费用项</el-button>
                </div>
               
            </div>
            <!-- 其他未结清费用-现费用项修改 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用-现费用项修改</span>
                    <span></span>
                </div>
                    <el-table fit :data="definitionList1" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用类型"  align="center" >
                            <template v-slot="{row}">
                                <el-select v-model="row.costType" placeholder="请选择" @change="costTypeChange(row)">
                                    <el-option
                                    v-for="item in form.costOtherVoList"
                                    :key="item.costType"
                                    :label="item.costType"
                                    :value="item.costType">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="修改前费用(元)" align="center"></el-table-column>
                        <el-table-column prop="changeAmount" label="修改后费用(元)" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.changeAmount"></el-input>
                            </template>
                        </el-table-column> 
                        <el-table-column prop="carNo" label="操作" align="center">
                            <template v-slot="{row}">
                                <el-button type="text" size="small" @click="deletCostItem3(row)">删除</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                    <el-button icon="el-icon-plus" @click="addCostItem">添加费用项</el-button>
            </div>
            <!-- 其他未结清费用-新费用项 -->
            <div class="card-wrap flex-column justify-end card-padding">
                <div class="card-title-wrap">
                    <span>其他未结清费用-新费用项</span>
                    <span></span>
                </div>
                    <el-table fit :data="definitionList4" border style="margin-top:10px;margin-bottom: 10px;" >
                        <el-table-column prop="costType" label="费用类型"  align="center" >
                            <template v-slot="{row}">
                                <el-input v-model="row.costType"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cost" label="费用金额(元)" align="center">
                            <template v-slot="{row}">
                                <el-input v-model="row.cost"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="fileId" label="附件" align="center">
                            <template slot-scope="scope">
                                <Image-common  v-model="scope.row.fileId" />
                            </template>
                        </el-table-column> 
                        <el-table-column prop="carNo" label="操作" align="center">
                            <template v-slot="{row}">
                                <el-button type="text" size="small" @click="deletCostItem4(row)">删除</el-button>
                            </template>
                        </el-table-column> 
                    </el-table>
                    <el-button icon="el-icon-plus" @click="addCostItem4">添加费用项</el-button>
            </div>
            
            <div class="card-wrap flex justify-end card-padding">
                <el-button @click="cancel">取消</el-button>
                <el-button  type="primary" @click="submitForm">提交</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
import LitigationApplicationLitigation from '@/views/collectionManagement/litigationApplication/compoent/litigation.vue'
import LitigationApplicationOrder from '@/views/collectionManagement/litigationApplication/compoent/order.vue'
import * as apis from "@/api/collectionManagement/litigationApplication.js";
import { cssmin } from 'vkbeautify';
export default {
    name: "Change",
    components: {LitigationApplicationOrder,LitigationApplicationLitigation},
    dicts: [ 'progress_litigation'],
    data() {
        return {
            form:{
                rentedUnitNum:'',
               
            },
            billFessList:[
                    {
                        carVonList:[],
                        definitionList:[],
                        id:new Date().getTime()

                    }
                ],
            newFessList:[
             {
                        carVonList:[],
                        definitionList:[],
                        id:new Date().getTime()

                    }
            ],
            newFessList1:[
                {
                    carVonList:[],
                    definitionList:[],
                    id:new Date().getTime()

                }
            ],
            definitionList1:[],
            definitionList4:[],
            rules:{},
            id:'',
            unclearedList:[],
            costItme:['超期租金','违约金','违章费','车损费用','加速折旧费','超里程费','尾款','客户理赔款','其他扣款费用'],
            newFessListCarCodeList:[],
            billFessListCarCodeList:[],
        };
    },
    watch:{
        billFessList:{
            deep:true,
            handler(val){
                this.billFessList = val
            }
        },
        newFessList:{
            deep:true,
            handler(val){
                this.newFessList = val
            }
        },
        'billFessList.carVonList':{
            deep:true,
            handler(val){
                this.billFessList.carVonList = val
            }
        },
        'billFessList.list':{
            deep:true,
            handler(val){
                this.billFessList.list = val
            }
        },
        'billFessList.periods':{
            deep:true,
            handler(val){
                this.billFessList.periods = val
            }
        },
        'billFessList.definitionList':{
            deep:true,
            handler(val){
                this.billFessList.definitionList = val
            }
        },
        newFessList1:{
            deep:true,
            handler(val){
                this.newFessList1 = val
            }
        },
        'newFessList.carVonList':{
            deep:true,
            handler(val){
                this.newFessList.carVonList = val
            }
        },
        definitionList1:{
            deep:true,
            handler(val){
                this.definitionList1 = val
            }
        },
        definitionList4:{
            deep:true,
            handler(val){
                console.log(val)
                this.definitionList4 = val
            }
        },
    },
    async created(){
        this.id=this.$route.query.id
        this.getList()
    },
    methods: {
        //
        payeeTypeNumChange(val,info){
            this.billFessList?.forEach((item)=>{
                if(item.carCode==info.carCode){
                    item.definitionList.forEach((info1)=>{
                        info.periods.forEach((res)=>{
                            console.log(res,'resres')
                            if(res.periodsNum = info1.periodsNum){
                                this.$set(info1,'payeeType',res.proceedsType)
                                this.$set(info1,'receivedAmount',res.receivedAmount)
                                info1.payeeType = res.proceedsType
                                info1.receivedAmount = res.receivedAmount
                            }
                        })
                        console.log(info1,'periodsNum')
                    })
                  
                }
            })
            console.log(val)
            console.log(info)
        },
        // 合同期内已生成账单未结清费用--修改-期数选择
        periodsNumChange(val,info){
            this.billFessList?.forEach((item)=>{
                if(item.carCode==info.carCode){
                    item.definitionList.map((info1)=>{
                        if(info1.periodsNum==val){
                            info1.payeeType = ''
                        }
                    })
                    let list = []
                    item.periods.map((res)=>{
                        if(res.periodsNum==val){
                            let obj = {
                                proceedsType:res.proceedsType,
                                proceedsTypeStr:res.proceedsTypeStr
                            }
                            list.push(obj)
                            // item.typeList.push(obj)
                        }
                    })
                    this.$set(item,'typeList',list)
                }
            })
            console.log(val)
            console.log(info)
        },
        // 合同期内已生成账单未结清费用--修改-车牌号选择
        billFessCarChange(val,info){
            console.log(val,'billFessCarChangebillFessCarChangebillFessCarChange')
            console.log(info,'billFessCarChangebillFessCarChangebillFessCarChange')
            apis.changeLitigationCarInfo({id:this.id,carCode:val,flag:1}).then((res)=>{
                if(res.code==200){
                    this.billFessList?.forEach((item)=>{
                        if(item.carCode==val){
                            item.periods = res?.data?.costContractList
                            this.$set(item,'periods',res?.data?.costContractList)
                        }
                    })
                }
                
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改--费用类型选择
        moneyType(val,info){
            this.newFessList?.map((item)=>{
                if(item.carCode == val.carCode ){
                   item.definitionList?.map((res)=>{
                    if(res.costType==info.costType){
                        this.unclearedList.map((info1)=>{
                            if(info1.carCode==val.carCode){
                                if(info.costType=='超期租金'){
                                    res.cost = info1.overdueCost
                                }else if(info.costType=='违约金'){
                                    res.cost = info1.defaultCost
                                }else if(info.costType=='违章费'){
                                    res.cost = info1.peccanCost
                                }else if(info.costType=='车损费用'){
                                    res.cost = info1.carDamageCost
                                }else if(info.costType=='加速折旧费'){
                                    res.cost = info1.depreciationCost
                                }else if(info.costType=='超里程费'){
                                    res.cost = info1.overMileageCost
                                }else if(info.costType=='尾款'){
                                    res.cost = info1.balanceCost
                                }else if(info.costType=='客户理赔款'){
                                    res.cost = info1.customClaimCost
                                }else if(info.costType=='其他扣款费用'){
                                    res.cost = info1.otherCost
                                }else{
                                    for (var key in info1){
                                        if(key == info.costType){
                                            res.cost = info1[key]
                                        }
                                    }
                                }
                            }
                        })
                    }
                   })
                }
            })
        },
        //合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改--车牌号选择
        nowMmoney(info){
            console.log(info,'nowMmoneynowMmoney')
            this.unclearedList.map((res)=>{
                if(info.carCode==res.carCode){
                    console.log(res,11111 )
                    this.newFessList?.map((item)=>{
                        if(item.carCode == info.carCode ){
                            const list = res?.costJson?JSON.parse(res.costJson):[]
                            item.options = [...list,...this.costItme]
                        }
                    })
                }
            })
            // this.getCarOff(info)
        },
        // 其他未结清费用-现费用项修改-费用类型选择
        costTypeChange(val){
            let obj = null
            this.form?.costOtherVoList?.map((res)=>{
                if(res.costType==val.costType){
                    obj = res
                }
            })
            this.definitionList1?.map((res)=>{
                if(res.costType==val.costType){
                    res.cost = obj.cost
                }
            })

        },
        // 获取所有信息
        getList(){
            apis.changeLitigation({id:this.id}).then((res)=>{
                if(res.code==200){
                    this.form = res.data
                    this.billFessList?.forEach((info)=>{
                        info.carVonList = res.data?.contractCarCodes
                        res.data?.contractCarCodes.map((item)=>{
                            this.billFessListCarCodeList.push(item)
                        })
                    })
                    console.log(this.billFessList,'this.billFessListthis.billFessList')
                    // this.newFessList.carVonList = res.data?.contractCarCodes
                    if(res?.data?.overdueJson){
                        let list = JSON.parse(res?.data?.overdueJson)
                        this.unclearedList = JSON.parse(res?.data?.overdueJson)
                        list.map((res)=>{
                            this.newFessList?.map((item)=>{
                                this.newFessListCarCodeList.push(res.carCode)
                                item.carVonList.push(res.carCode)
                            })
                            this.newFessList1?.map((item)=>{
                                item.carVonList.push(res.carCode)
                            })
                        })
                    }
                }   
            })
        },
        // 获取车辆信息--合同期内已生成账单未结清费用--修改
        getCarWithin(info){
            apis.changeLitigationCarInfo({carCode:info.carCode,flag:1,id:this.id}).then((res)=>{
                if(res.code==200){
                    console.log(res.data,'合同期内')
                }
            })
        },
        // 获取车辆信息--合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改
        // getCarOff(info){
        //     apis.changeLitigationCarInfo({carCode:info.carCode,flag:2,id:this.id}).then((res)=>{
        //         if(res.code==200){
        //             console.log(res.data,'合同期外')
        //         }
        //     })
        // },
        // 预览图片
        previewImage(urls) {
            console.log(urls);
            this._previewImages(urls);
        },
        cancel(){
            this.$router.push({name:"LitigationApplication"})
        },
        submitForm(){
            // console.log(this.form,'form')
            // console.log(this.billFessList,'billFessList')
            console.log(this.newFessList,'newFessList')
            console.log(this.newFessList1,'newFessList1')
            // console.log(this.definitionList1,'definitionList1')
            // console.log(this.definitionList4,'definitionList4')
            let list = []
            let list1 = [...this.newFessList,...this.newFessList1]
            // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-数据处理
            let newFessListJson = JSON.parse(JSON.stringify(list1))
            let newArr = [];
            newFessListJson.forEach((item) => {
                const parent = newArr.find((c) => c.carCode === item.carCode);
                console.log(parent,'parentparent')
                if (parent) {
                    parent.definitionList.push(...item.definitionList);
                    parent.definitionList = Array.from(new Set(parent.definitionList));
                } else {
                    console.log(item,11111)
                    const obj = {
                    carCode: item.carCode,
                    definitionList: item.definitionList
                    };
                    newArr.push(obj);
                }
            });
            newArr.forEach((res)=>{
                res.definitionList = [...new Map(res.definitionList.map(item => [item.costType, item])).values()]
            })
            console.log(newArr,'list2list2')
            let param = JSON.parse(JSON.stringify(this.form))
            param.costOtherVoList = [...this.definitionList1,...this.definitionList4]
            param.costContractList = this.billFessList
            console.log(param)

        },
        // 其他未结清费用-现费用项修改-加行
        addCostItem(){
            const obj = {
                costType:'',
                cost:'',
                changeAmount:'',
            }
            this.definitionList1.push(obj)
        },
        // 其他未结清费用-新费用项-加行
        addCostItem4(){
            const obj = {
                costType:'',
                cost:'',
                fileId:'',
                id:new Date().getTime(),
            }
            this.definitionList4.push(obj)
        },

        // 合同期内已生成账单未结清费用--修改-添加
        billFessListAdd(){
            let obj =  {
                        id:new Date().getTime(),
                        carVonList:this.billFessListCarCodeList,
                        definitionList:[],
                    }
            this.billFessList.push(obj)
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项-添加
        billFessListAdd1(){
            let obj =  {
                        id:new Date().getTime(),
                        carVonList:this.newFessListCarCodeList,
                        definitionList:[],
                    }
            this.newFessList1.push(obj)
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-整体新增
        newFessListAdd(value){
            let obj =  {
                        id:new Date().getTime(),
                        carVonList:this.newFessListCarCodeList,
                        definitionList:[],

                    }
            this.newFessList.push(obj)
        },
        // 合同期内已生成账单未结清费用--修改-删除
        billFessListdelt(value){
            this.billFessList?.map((res,index)=>{
                if(res.id==value){
                    this.billFessList.splice(index,1)
                }
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项-删除
        billFessListdelt1(value){
            this.newFessList1?.map((res,index)=>{
                if(res.id==value){
                    this.newFessList1.splice(index,1)
                }
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-删除
        newFessListdelt(value){
            this.newFessList?.map((res,index)=>{
                if(res.id==value){
                    this.newFessList.splice(index,1)
                }
            })
        },
       
        // 合同期内已生成账单未结清费用--修改-行删除
        deletCostItem(info,id){
            this.billFessList?.map((res)=>{
                if(res.id==id){
                    res.definitionList?.map((item,index)=>{
                        if(item.id==info.id){
                            res.definitionList.splice(index,1)
                        }
                    })
                }
            })
        },
         // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-行删除
         deletCostItem2(info,id){
            this.newFessList?.map((res)=>{
                if(res.id==id){
                    res.definitionList?.map((item,index)=>{
                        if(item.id==info.id){
                            res.definitionList.splice(index,1)
                        }
                    })
                }
            })
        },
          // 其他未结清费用-现费用项修改-行删除
          deletCostItem3(info,id){
            this.definitionList1?.map((res)=>{
                if(res.id==id){
                    res.definitionList?.map((item,index)=>{
                        if(item.id==info.id){
                            res.definitionList.splice(index,1)
                        }
                    })
                }
            })
        },
         // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-行删除
         deletCostItem(info,id){
            this.billFessList?.map((res)=>{
                if(res.id==id){
                    res.definitionList?.map((item,index)=>{
                        if(item.id==info.id){
                            res.definitionList.splice(index,1)
                        }
                    })
                }
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项-行删除
        deletCostItem5(info,id){
            this.newFessList1?.map((res)=>{
                if(res.id==id){
                    res.definitionList?.map((item,index)=>{
                        if(item.id==info.id){
                            res.definitionList.splice(index,1)
                        }
                    })
                }
            })
        },
        // 其他未结清费用-新费用项 - 删除
        deletCostItem4(info){
            this.definitionList4?.map((res,index)=>{
                if(res.costType==info.costType){
                    this.definitionList4.splice(index,1)
                }
            })
        },

        // 合同期内已生成账单未结清费用--修改-行添加
        addCostItem1(id){
            this.billFessList?.map((res)=>{
                console.log(res)
                if(res.id==id){
                    let obj ={
                        periodsNum:'',costType:'', cost:'',changeAmount:'',id:new Date().getTime()
                    }
                    res.definitionList.push(obj)
                }
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--新费用项-行添加
        addCostItem3(id){
            this.newFessList1?.map((res)=>{
                if(res.id==id){
                    let obj ={
                        costType:'', cost:'',changeAmount:'',id:new Date().getTime(),options:[]
                    }
                    res.definitionList.push(obj)
                }
            })
        },
        // 合同期内或合同期外未还车发生诉讼产生的未结清费用--现费用项修改-行添加
        addCostItem2(id){
            this.newFessList?.map((res)=>{
                if(res.id==id){
                    let obj ={
                        costType:'', cost:'',changeAmount:'',id:new Date().getTime(),options:[]
                    }
                    res.definitionList.push(obj)
                }
            })
        },
        //其他未结清费用-现费用项修改-行删除
        deletCostItem1(info){   
            this.definitionList1?.map((res,index)=>{
                if(res.costType==info.costType){
                    this.definitionList1.splice(index,1)
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
}

::v-deep .el-descriptions__header {
    margin-top: -8px !important;
    margin-bottom: 10px !important;
}
.icon_add {
    margin-left: 10px;
    cursor: pointer;
    color: blue;
}
.title_box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    .title_text{
        color:#606266;
        font-size:14px;
        margin-right:10px;
    }
    .add_btn{
        width: 100%;
    }
    .icon_sty{
        margin-right: 10px;
    }
}

</style>
